<template>
	<view class="edit_ed">
		<view class="logo_pic">
			<view class="tit_text">注销前请认真阅读以下重要提醒</view>
			<text>账号注销后，您将无法再使用该账号，包括但不限于:</text>
			<text style="text-indent: 1em">1.无法登录、使用账号，并移除该账号下所有登录方式，且不支持找回任何个人资料；</text>
			<text style="text-indent: 1em">2.移除该账号下的手机信息；</text>
			<text style="text-indent: 1em">3.该账号下的个人资料和历史信息都将无法找回；</text>
			<view>
				<span>详细查看</span><span class="cancel_alink" @click="lookPDF()">《注销协议》</span>。
			</view>
		</view>
		<view class="input_ediit">
		<text>注销账号服务商：{{store.state.userInfo.network}}</text>
		</view>
		<!-- <view class="input_ediit">
			<text>注销账号{{store.getters.setProcessingTel}}</text>
		</view> -->
		<view class="btn_edit" @click="cancelAccount()">
			<button type="primary" class="onlogout">确认注销</button>
		</view>
		<uni-popup ref="popup">
			<view class=""
				style="margin: 40rpx;padding: 20rpx;border-radius: 20rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;">
				<view class="" style=" height: 70vh;overflow-y: auto;">
					<agreecancel></agreecancel>
				</view>
				<view class="btn"
					style="font-size: 28rpx;margin-top: 20rpx;border: 1px solid #eee; padding: 12rpx 24rpx;border-radius: 10rpx;">
					<view @click="popup.close()">关闭</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		nextTick
	} from "vue"
	import apiUser from '@/util/network_api/user.js'
	import store from '@/store_network/index.js'
	import agreecancel from '@/pages/agreement/cancel.vue'
	const popup = ref()
	// 查看协议
	const lookPDF = () => {
		popup.value.open()
	}
	const cancelAccount = () => {
		apiUser.cancelAccount().then(res => {
			if (res.code == 20000) {
				uni.showToast({
					title: "注销成功",
					icon: 'none',
					duration:2000
				})
				uni.reLaunch({
					url: "/pages/pages_network/login/login"
				});
				uni.removeStorageSync('dd-access-network')
			}
		})
	}
</script>

<style lang="scss">
	.edit_ed {
		.logo_pic {
			padding: 40rpx 60rpx;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			row-gap: 12rpx;

			.tit_text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.input_ediit {
			margin: 0 60rpx;
			font-size: 28rpx;
		}

		.cancel_alink {
			color: #007cff;
			text-decoration: underline;
		}

		.btn_edit {
			position: absolute;
			margin: 60rpx auto;
			width: 100%;

			:deep(button:after) {
				border: none !important;
			}

			.onlogout {
				font-size: 28rpx;
				font-weight: bold;
				padding: 0rpx 20rpx;
				margin: 0 36rpx;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #007cff;
			}

			.btn_bg {
				background-color: #007cff;
			}
		}
	}
</style>